<template>
  <div>
      <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
        <el-menu-item index="1" class="title" style="border: none"><b class="title">万微入港车辆调度系统</b></el-menu-item>
<!--        <el-submenu index="2">-->
<!--          <template slot="title">我的工作台</template>-->
<!--          <el-menu-item index="2-1">选项1</el-menu-item>-->
<!--          <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--          <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--          <el-submenu index="2-4">-->
<!--            <template slot="title">选项4</template>-->
<!--            <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--            <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--            <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--          </el-submenu>-->
<!--        </el-submenu>-->
          <el-submenu index="3" style="float: right">
              <template slot="title">个人设置</template>
              <el-menu-item index="2-1" @click="showModal('您是否要退出登录', '退出登录', 'signOut')">退出登录</el-menu-item>
              <el-menu-item index="2-2" @click="showModal('本功能正在维护 程序猿加急中~~', '上传头像', 'headImg')">上传头像</el-menu-item>
              <el-menu-item index="2-3" @click="showModal('是否要跳转至首页修改密码', '密码修改', 'changePassword')">修改密码</el-menu-item>
          </el-submenu>
          <div class="headImg">
          </div>
      </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'comNav',
    data(){
      return {
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
        showModal(msg, title, stat) {
            this.$confirm(msg, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                switch (stat) {
                    case 'signOut':
                        localStorage.removeItem('userName')
                        localStorage.removeItem('userToken')
                        this.goIndex('/login')
                        break;
                    case 'headImg':
                        this.$message({
                                type: 'success',
                                message: '本功能正在维护 程序猿加急中~~!'
                        });
                        break;
                    case 'changePassword':
                        this.goIndex('/login')
                        break;
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    }
  }
</script>

<style scoped lang="scss">
  .title{
    font-size: 20px;
    letter-spacing: 5px;
  }
    .headImg{
        width: 50px;
        height: 50px;
        float: right;
        border-radius: 50%;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        margin-top: 5px;
        background: url("../assets/image/truck.png");
        background-size: cover;
        margin-right: 20px;
    }
</style>
